<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>财务出</title>
<style type="text/css">
.datagrid-ftable {
	color: red;
	font-weight: bold;
}

.datagrid-body {
	height: 300px !important;
}

.datagrid-view {
	height: 360px !important;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
<script type="text/javascript">
var isValid;
var helpType;
var data;
var flag=0;
var del=0;
var queryInit = true ;
var loginAccount = 'admin';
$(function(){
	
	$('#paymentType').combobox({onLoadSuccess:function(){
		var data = $('#paymentType').combobox('getData');
		if(data){
 			$("#paymentType").combobox('select',data[0].id);
		}
	}
	});
});


$(function(){
		$("#search").click(function(){
			queryInit = false;
			var params = {
				startTime:$("#startTime").datebox('getValue'),
				endTime:$("#endTime").datebox('getValue'),
				center:$("#kdzx").combobox("getValue"),
				cellPhone:$("#cellPhone").val(),
				memberName:$("#memberName").val(),
				paymentType:$("#paymentType").combobox("getValue"),
			};
			$("#tt").datagrid({url:"${pageContext.request.contextPath}/payment/list",queryParams:params});
		});
		
		$("#export").click(function(){
			var params = {
				name:$("#kdzx").combobox("getValue"),
				startTime:$("#startTime").datebox('getValue'),
				endTime:$("#endTime").datebox('getValue'),
				cellPhone:$("#cellPhone").val(),
				memberName:$("#memberName").val(),
				paymentType:$("#paymentType").combobox("getValue"),
			};
	 		window.location.href="${pageContext.request.contextPath}/payment/export?name="+params.name
					+"&startTime="+encodeURI(params.startTime)
					+"&endTime="+encodeURI(params.endTime)
					+"&paymentType="+params.paymentType
					+"&cellPhone="+params.cellPhone
					+"&memberName="+params.memberName
					; 
		});
		
		$("#drop").click(function(){
			if($("#pulldown").css("display")=="none"){
				$("#pulldown").show(500);
				$(this).removeClass("glyphicon-download");
				$(this).addClass("glyphicon-upload");
			}else{
				$("#pulldown").hide(500);
				$(this).addClass("glyphicon-download");
				$(this).removeClass("glyphicon-upload");
			}
			setTimeout(function(){  
				
		    	$(".datagrid-wrap").css("height",window.innerHeight+'px');
		    },500); 
		});
		
		init();
		
		
	});
	/**
	初始化依赖数据
*/
function init(){
	 	$.ajax({
			url:'${pageContext.request.contextPath}/enum?enumName=PayType',			
			cache:true,
			async:false,
			success:function(data){
				isValid = data;
			}
		}); 

}; 

/**
 * 生成报表
 */
$(function(){
	$("#addReport").click(function(){
		//显示报表div
		$("#report").css("display","block");
		
		var kdzx = new Array();
		var cashes = new Array();
		
		 //	查询数据
		 
		$.ajax({
			url:'${pageContext.request.contextPath}/payment/getReport',			
			cache:true,
			async:false,
			success:function(data){
				for(var i = 0;i<data.length;i++){
					kdzx.push({
						value:data[i].userName
					});
					cashes.push({
						value:data[i].cash
					})
				}
			}
		}); 
		
		  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('report'));
		  
		
        var dataAxis = kdzx;
        var data = cashes;
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }

            option = {
            	    title: {
                        text: '财务出表 柱状图',
                        subtext: '可点击'
                    },
            	    color: ['#3398DB'],
            	    tooltip : {
            	        trigger: 'axis',
            	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            	        }
            	    },
            	    grid: {
            	        left: '3%',
            	        right: '4%',
            	        bottom: '3%',
            	        containLabel: true
            	    },
            	    xAxis : [
            	        {
            	            type : 'category',
            	            data : kdzx,
            	            axisTick: {
            	                alignWithLabel: true
            	            }
            	        }
            	    ],
            	    yAxis : [
            	        {
            	            type : 'value'
            	        }
            	    ],
            	    series : [
            	        {
            	            name:'直接访问',
            	            type:'bar',
            	            barWidth: '60%',
            	            data:cashes
            	        }
            	    ]
            	};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
	});
});


$(function(){
    $("#cellPhone").textbox('textbox').bind('keyup', function(e){
	        $("#cellPhone").textbox('setValue', $(this).val().replace(/\D/g,''));
    });
});

function getStatus(value,row,index){
	for(var g in isValid){
		if(isValid[g].id==value){
			return isValid[g].name;
		}
	}
	return value;
}

function rowStyle(index,row){
	if (index%2==0){     
        return 'background-color:lightcyan;';     
    }     
}

//日期格式化
function gettime(val,row,index){
	if (val!=null) {
		  var s = val.substr(0,10);
	}
	return s;
}

function formatMoney(number) {
//	if (number.indexOf(",") >= 0) {
//		number = number.replace(/\,/g, "");
//	}
//	if (isNaN(number) || number == "")
//		return "";
number = Math.round(number * 100) / 100;
return outputDollars(Math.floor(number - 0) + '') + outputCents(number - 0);
}
function outputDollars(number) {
if (number.length <= 3)
	return (number == '' ? '0' : number);
else {
	var mod = number.length % 3;
	var output = (mod == 0 ? '' : (number.substring(0, mod)));
	for (i = 0; i < Math.floor(number.length / 3); i++) {
		if ((mod == 0) && (i == 0))
			output += number.substring(mod + 3 * i, mod + 3 * i + 3);
		else
			output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
	}
	return (output);
}
}
function outputCents(amount) {
amount = Math.round(((amount) - Math.floor(amount)) * 100);

if (amount == 10 || amount == 20 || amount == 30 || amount == 40
		|| amount == 50 || amount == 60 || amount == 70 || amount == 80
		|| amount == 90) {
	amount = (amount.toString()).substr(0, (amount.toString()).length - 1);
	return '.' + amount;
} else if (amount == 0) {
	return "";
} else if (amount == 1 || amount == 2 || amount == 3 || amount == 4
		|| amount == 5 || amount == 6 || amount == 7 || amount == 8
		|| amount == 9) {
	return '.0' + amount;
} else {
	return '.' + amount;
}
}
//鼠标悬停显示提示
function showTips(value, row, index) {
	var content = '';
	if(value != null && value != ''){
	    if(value.length>6 && strDateTime(value)){ //如果为时间
			value = value.substr(0,10);    	
	    }
	    content = '<span title="' + value + '" class="note" >' + value + '</span>';
	}
    return content;
}
function showPaymentTypeTips(value, row, index) {
	var p = getStatus(value,row,index);
    return showTips(p);
}
function showMoneyTips(value, row, index) {
	var m = formatMoney(value,row,index);
    return showTips(m);
}
//判断是否为时间格式 yyyy-MM-dd HH:mm:ss
function strDateTime(str){
	var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; 
	var r = str.match(reg); 
	if(r==null)return false; 
	var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); 
	return (d.getFullYear()==r[1]&&
	(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7
	]);
}
</script>


</head>
<body>
	<div class="jianju">
		<h3>财务出表</h3>
		<div id="tb" style="padding: 5px; height: auto">
			<div style="margin-bottom: 5px">
				<a id="export" href="#" class="easyui-linkbutton button"
					iconCls="icon-daochu">导出</a>
			</div>
			<div style="margin-bottom: 5px">
				<a id="addReport" class="easyui-linkbutton button">生成报表</a>
			</div>
		
	
	
	 		<hr />
			<div>
				<label style="margin-left: 0;">发生时间：</label>
				 <input id="startTime"
					type="text" class="easyui-datebox" style="width: 120px"
					editable="false" /> &nbsp;~&nbsp;
					<input id="endTime" type="text"
					style="width: 120px" class="easyui-datebox" editable="false" /> 
					<a id="search" href="#" class="easyui-linkbutton button"
					style="margin-left: 15px;" iconCls="icon-search">查询</a> <br>
				<div id="pulldown" style="display: none;">
					<label style="margin-left: 0px">开单中心：</label> 
					<select id="kdzx"
						class="easyui-combobox" style="width: 120px" mode="remote" url="${pageContext.request.contextPath}/payment/getCenter"
					valueField="userAccount" textField="userName" method="get" editable="false"
					panelHeight="auto">
					</select>
					 <label style="margin-left: 15px">会员手机号：</label><input id="cellPhone"
						class="easyui-textbox" style="width: 100px"> <label
						style="margin-left: 15px">会员姓名：</label><input id="memberName"
						class="easyui-textbox" style="width: 80px"> <label
						style="margin-left: 15px">支付类型：</label><select id="paymentType"
						class="easyui-combobox" style="width: 160px" mode="remote" url="${pageContext.request.contextPath}/enum?enumName=PayType&all=true"
						valueField="id" textField="name" method="get" editable="false"
						panelHeight="auto">
					</select>
				</div>
				<div class="demo_line_01">
					<span class="line"></span> <span id="drop"
						style="font-size: 20px; margin-right: 12px"
						class="glyphicon glyphicon-download"> </span><span class="line"></span>
				</div>
			</div>
		</div>
		<table id="tt" class="easyui-datagrid" url="" title=""
			style="width: 98%; minWidth: 1000px;" rownumbers="true"
			pagination="true" pageList="[200]" method="get" toolbar="#tb"
			singleSelect="true" pageSize="200" fitColumns="true" idField="id"
			showFooter="true" rowStyler="rowStyle"onLoadSuccess:function(data){
                $(".note").tooltip({
                    onShow:function(){
                        $(this).tooltip('tip').css({ 
                            width:'300',
                            boxShadow: '1px 1px 3px #292929'       
                                             
                        });
                    }
                });
             } >
			<thead>
				<tr style="background: #148CCA;">
					<th
						data-options="field:'orderNumber',align:'left',formatter:showTips"
						style="width: 17%">订单编号</th>
					<th
						data-options="field:'memberName',align:'left',formatter:showTips"
						style="width: 12%">会员姓名</th>
					<th
						data-options="field:'cellPhone',align:'center',formatter:showTips"
						style="width: 16%">会员手机号</th>
					<th
						data-options="field:'userName',align:'center',formatter:showTips"
						style="width: 12%">开单中心</th>
					<th
						data-options="field:'paymentType',align:'center',formatter:getStatus,formatter:showPaymentTypeTips"
						style="width: 12%">支付类型</th>
					<th
						data-options="field:'paymentTimeStr',align:'center',formatter:gettime,formatter:showTips"
						style="width: 16%">发生时间</th>
					<th
						data-options="field:'cash',align:'right',formatter:formatMoney,formatter:showMoneyTips"
						style="width: 13%">金额</th>
				</tr>
			</thead>
		</table>
			<!-- ECharts报表 -->
    			<div   id="report" style="display: none ; width: 80%;height:600px;">
				</div>
				<div  style="height: 100px">
				</div>
	</div>
</body>


</html>